<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MutationObserver</title>
  </head>
  <body>
    <div id="container">
      <p>A</p>
      <p>B</p>
    </div>
  </body>
</html>
<script>
  // MutationObserver 的回调函数
  // function callback(records: MutationRecord[], observer: MutationObserver) {
  function callback(records, observer) {
    for (let record of records) {
      console.log("record", record);
    }
  }
  const observer = new MutationObserver(callback); // 创建一个观察器实例并传入回调函数
  const containerElem = document.getElementById("container");
  const options = {
    attributes: true, // 监听属性变化
    attributeOldValue: true, // 变化之后，记录旧属性值
    childList: true, // 监听子节点变化（新增删除）
    characterData: true, // 监听节点内容或文本变化
    characterDataOldValue: true, // 变化之后，记录旧内容
    subtree: true, // 递归监听所有下级节点
  };
  // 开始监听
  observer.observe(containerElem, options);

  // 停止监听
  // observer.disconnect()
</script>
